<template>
  <div class="index">
    <Header></Header>
    <div class="main" style="padding-top: 60px;">
      <p class="current-nav">
        当前位置 :
        <router-link to="homePage">首页</router-link>
        <i> > </i>应急预案检测功能体验
      </p>
      <div class="monitor-main" style="height: 100%">
        <div class="monitor-content" style="height: 100%">
          <!-- <div class="asTitle">
              <h3>应急预案检测</h3>
          </div> -->
          <dl class="hint-section">
            <dt>温馨提示</dt>
            <dd>
              (1)此处仅可以上传
              <span class="red">一个word版</span>应急预案进行体验
            </dd>
            <dd>(2)检测过程需要一定时间，请您耐心等待</dd>
          </dl>
          <div class="table-header clearfix">
            <div class="opts clearfix">
              <el-upload
                action="/emergency/v1.0/index/plan/checked"
                :http-request="uploadFile"
                :data="{ planType: 1 }"
                :show-file-list="false"
                accept=".doc,.docx"
              >
                <el-button
                  class="grp1"
                  :loading="uploadFile1Loading"
                >
                  <i class="el-icon-upload2">上传综合预案</i>
                </el-button>
              </el-upload>
              <el-upload
                action="/emergency/v1.0/index/plan/checked"
                :http-request="uploadFile"
                :show-file-list="false"
                :data="{ planType: 2 }"
                accept=".doc,.docx"
              >
                <el-button
                  class="grp1"
                  :loading="uploadFile2Loading"
                >
                  <i class="el-icon-upload2">上传专项预案</i>
                </el-button>
              </el-upload>
              <el-upload
                action="/emergency/v1.0/index/plan/checked"
                :http-request="uploadFile"
                :show-file-list="false"
                :data="{ planType: 3 }"
                accept=".doc,.docx"
              >
                <el-button
                  class="grp1"
                  :loading="uploadFile3Loading"
                >
                  <i class="el-icon-upload2"
                  >上传现场处置方案</i
                  >
                </el-button>
              </el-upload>
            </div>
            <!-- <p>预案汇编综合得分：
                <strong>63.5</strong>分</p> -->
          </div>
          <h3 class="table-title">得分详情</h3>
          <div class="table-wrap" style="padding-bottom: 50px">
            <el-table
              ref="multipleTable"
              :data="planList"
              tooltip-effect="dark"
              v-loading.lock="loadings"
              element-loading-spinner="el-icon-loading"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="planName"
                label="预案名称"
                :show-overflow-tooltip="true"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="预案类别"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template slot-scope="scope">
                                    <span>{{
                                        scope.row.planType == 1
                                            ? "综合预案"
                                            : scope.row.planType == 2
                                            ? "专项预案"
                                            : "现场处置方案"
                                    }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="checkReportName"
                label="预案检测报告"
                :show-overflow-tooltip="true"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="结构得分"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template slot-scope="scope">
                                    <span
                                      :class="{
                                            red: scope.row.structureScore < 60
                                        }"
                                    >{{ scope.row.structureScore }}分</span
                                    >
                </template>
              </el-table-column>
              <el-table-column
                label="内容得分"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template slot-scope="scope">
                                    <span
                                      :class="{
                                            red: scope.row.contentScore < 60
                                        }"
                                    >{{ scope.row.contentScore }}分</span
                                    >
                </template>
              </el-table-column>
              <el-table-column
                label="单个预案得分"
                :show-overflow-tooltip="true"
                align="center"
              >
                <template slot-scope="scope">
                                    <span
                                      :class="{
                                            red: scope.row.totalScore < 60
                                        }"
                                    >{{ scope.row.totalScore }}分</span
                                    >
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作"
                align="center"
                width="330"
              >
                <template slot-scope="scope">
                  <div class="div-edit">
                    <el-button
                      class="newleft"
                      @click="lookPlan(scope.row)"
                    >
                      <i class="el-icon-search"></i
                      >查看
                    </el-button
                    >
                    <!--<el-button
                        class="newright"
                        @click="exportPlan(scope.row)"
                    >
                        <i class="el-icon-upload2"></i>
                        导出
                    </el-button>
                    <el-button
                        class="newright"
                        @click="deletePlan(scope.row)"
                    >
                        <i class="el-icon-delete"></i>
                        删除
                    </el-button>-->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--      <div class="page-container">
                    <el-pagination
                        @current-change="getList"
                        :current-page.sync="pageIndex"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total"
                    ></el-pagination>
                    <el-button>确定</el-button>
                </div>-->
        </div>
      </div>
      <el-dialog title="提示信息" :visible.sync="dialogVisible" :close-on-click-modal="true" :modal="true" :show-close="true"
                 :center="true" style="text-align: center">
        <span style="font-size: 18px;color: #2db0fd;font-weight: bold;">您还想继续检测应急预案吗?请登录应急预案智能管理公共服务平台享受更多特权吧！</span>
         <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>

      </el-dialog>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from '../common/header3'
  import Footer from '../common/footer'

  export default {
    name: 'monitor',
    components: {
      Header,
      Footer
    },
    data() {
      return {
        loadings: false,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        planList: [],
        uploadFile1Loading: false,
        uploadFile2Loading: false,
        uploadFile3Loading: false,
        scoreArr: [],
        userAccount: '',
        flag: false,
        dialogVisible:false
      };
    },
    created() {
      this.userAccount = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).userAccount : ''
      //this.getScore()
      this.getList()
    },
    methods: {
      uploadFile(file) {
        if (this.flag) {
          this.dialogVisible=true
          //this.$message.warning("您还想继续检测应急预案吗?请登录应急预案智能管理公共服务平台享受更多特权吧！");
          return
        }
        let ip = returnCitySN['cip']
        let url = `${this.$baseUrl}/emergency/v1.0/index/plan/checked`
        var fd = new FormData();
        fd.append("file", file.file);
        fd.append(
          "ipAddress",
          ip
        );
        fd.append(
          "planName", this.splitFileName(file.file.name)
        );
        fd.append(
          "planType", file.data.planType
        );
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.wordmsg = "上传中";
        this[`uploadFile${file.data.planType}Loading`] = true;
        this.$axios.post(url, fd, config).then(res => {
          this[`uploadFile${file.data.planType}Loading`] = false;
          if (res.data.meta.success) {
            this.$message({
              message: "上传成功",
              type: "success"
            });
            // this.getScore()
            this.getList()
            // this.getGradeList(file.data.planType)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },

      getScore() {
        let url = `${this.$baseUrl}emergency/v1.0/plan/avg/score/${JSON.parse(localStorage.getItem("user")).id}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.scoreArr = []
            if (res.data.data.length > 0) {
              this.scoreArr[0] = {}
              res.data.data.forEach(item => {
                this.scoreArr[0][item.planType] = item.score
              });
            }
          } else {
            this.scoreArr = []
            if (res.data.meta.message !== '暂无数据') {
              this.$message({
                message: res.data.meta.message,
                type: "error"
              });
            }
          }
        })
      },
      getList() {
        let params = {
          "pageIndex": this.pageIndex,
          "pageSize": this.pageSize,
          "ipAddress": returnCitySN['cip']
        }
        let url = `${this.$baseUrl}emergency/v1.0/index/plan/scores/list`
        this.$axios.post(url, params).then(res => {
          if (res.data.meta.code == 200) {
            this.planList = res.data.data.records
            this.total = res.data.data.total
            this.flag = true
          } else {
            this.planList = []
            this.total = 0
            if (res.data.meta.message !== '暂无数据') {
              this.$message({
                message: res.data.meta.message,
                type: "error"
              });
            }
          }
        })
      },
      lookPlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/index/plan/score/info/${item.id}/${item.planType}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            window.open(res.data.data)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },
      exportPlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/plan/score/download/${item.id}/${item.planType}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.download(res.data.data)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },
      deletePlan(item) {
        let url = `${this.$baseUrl}emergency/v1.0/plan/score/delete/${item.id}`
        this.$axios.get(url).then(res => {
          if (res.data.meta.code == 200) {
            this.$message({
              message: '删除成功',
              type: "error"
            });
            this.getScore()
            this.getList()
            this.deleteFile(item.id)
          } else {
            this.$message({
              message: res.data.meta.message,
              type: "error"
            });
          }
        })
      },

      download(blobUrl, name) {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = name;
        a.href = blobUrl;
        a.click();
      },
      splitFileName(text) {
        var pattern = /\.{1}[a-z]{1,}$/;
        if (pattern.exec(text) !== null) {
          return (text.slice(0, pattern.exec(text).index));
        } else {
          return text;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .div-edit{
    display: flex;
    justify-content: center;
  }
  .el-dialog--center .el-dialog__body {

    text-align: center;
  }
  .current-nav {
    float: none;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    color: #939393;
    font-size: 14px;
    background: #f3f3f3;
  }

  .monitor-main {
    padding: 0 30px;
  }

  .monitor-content {
    background: #fff;
  }

  .asTitle {
    margin-bottom: 50px;
  }

  .asTitle h3 {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    padding: 20px 0 0 20px;
  }

  .hint-section {
    padding-left: 30px;
    margin-bottom: 52px;
    padding-top: 20px;
  }

  .hint-section dt {
    width: 102px;
    height: 36px;
    line-height: 36px;
    background: url(../../../static/images/hint.png) no-repeat 12px center;
    background-size: 18px 18px;
    background-color: #f6f9ff;
    padding-left: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    margin-bottom: 15px;
  }

  .hint-section dd {
    line-height: 30px;
    padding-left: 10px;
    color: #656565;
    font-size: 14px;
  }

  .table-header {
    padding: 0 30px;
  }

  .table-header .opts {
    float: left;
    margin-bottom: 30px;
  }

  .table-header .opts button {
    background: #f6f9ff;
    border: none;
    height: 36px;
    border-radius: 4px;
    font-size: 14px;
    color: #3e83fc;
    padding: 0 10px;
    margin-right: 10px;
  }

  .table-header button i {
    margin-right: 4px;
  }

  .table-header p {
    float: right;
    line-height: 36px;
    color: #686868;
    font-size: 12px;
  }

  .table-header p strong {
    color: #4482fb;
    font-size: 18px;
  }

  .table-wrap {
    padding: 0 30px;
  }

  .table-wrap .el-table {
    width: 100%;
    border-top: 1px solid #ebeef5;
  }

  .page-container {
    padding: 28px 0;
    width: 620px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .page-container .el-pagination {
    float: right;
  }

  .page-container .el-button {
    float: right;
    background: #edf4fe;
    width: 50px;
    padding: 0;
    height: 28px !important;
    margin: 4px 10px auto;
    color: #7fa4fc;
    border: 0;
  }

  .table-wrap table button {
    width: 80px;
    height: 36px;
    background-color: #f6f9ff;
    border: none;
    font-size: 14px;
    color: #3e83fc;
    text-align: center;
  }

  .red {
    color: #ff0507;
  }

  .mb50 {
    margin-bottom: 40px;
  }

  .table-title {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    line-height: 50px;
    margin-left: 20px;
  }
</style>
<style>
  .table-header .opts > div {
    float: left;
  }

  .table-wrap th .cell {
    color: #333333;
  }

  .table-wrap td .cell {
    color: #676767;
  }
</style>


